<template>
<!-- TODO 头像系统 -->
  <div class="me">
    <div class="user">
      <el-row class="container" style="height: 100px;">
        <el-col :span="4" :xs="7">
          <div class="userimg">
            <img src="../assets/默认头像.jpg" alt="">
          </div>
        </el-col>
        <el-col  :span="20" :xs='17' v-if='this.$store.state.phone'>
          <div class="usermsg">
            <div>
              <h3 v-if='this.$store.state.nickname' @click='$router.push("/name")'>{{this.$store.state.nickname}}</h3>
              <h3 v-else @click='$router.push("/name")'>未设置用户名</h3>
            </div>
            <div>
              <font class="el-icon-mobile-phone" v-if="this.$store.state.phone">
                {{this.$store.state.phone|phone('*')}}
              </font>
            </div>
          </div>
        </el-col>
        <el-col  :span="20" :xs='17' v-else>
          <div class="usermsg">
            <font @click='$router.push({path:"/login"})' style='line-height:70px;font-size:18px;'>
              请先登陆
            </font>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list" style="margin:20px 0;" @click='push("/dress")'>
        <el-row class="container">
          <el-col :span="3">
            <i class="el-icon-location-outline ic"></i>
          </el-col>
          <el-col :span="17">
            <div class="listitem">
              <h3>收货地址</h3>
            </div>
          </el-col>
          <el-col :span="4" class="list-right">
            <font>></font>
          </el-col>
        </el-row>
      </div>
    <div class="list" @click='push("/name")'>
      <el-row class="container">
        <el-col :span="3">
          <i class="ic el-icon-user"></i>
        </el-col>
        <el-col :span="17">
          <div class="listitem">
            <h3>用户名</h3>
          </div>
        </el-col>
        <el-col :span="4" class="list-right">
          <font>></font>
        </el-col>
      </el-row>
    </div>
    <el-row style="width: 90%;margin: auto;">
      <el-col :span="21" style="float: right;">
        <hr color="gainsboro">
      </el-col>
    </el-row>
    <div class="list" @click='push("/pwd")'>
      <el-row class="container">
        <el-col :span="3">
          <i class="ic el-icon-unlock"></i>
        </el-col>
        <el-col :span="15" :xs="10">
          <div class="listitem">
            <h3>密码</h3>
          </div>
        </el-col>
        <el-col :span="6" :xs='11' class="list-right">
          <font v-show='!this.$store.state.pwdshow' style='color: rgb(0, 166, 255);'>未设置密码</font>
          &emsp;&emsp;&emsp;&emsp;&emsp;
          <font>></font>
        </el-col>
      </el-row>
    </div>
    <div class="list" style="margin:20px 0px;" @click='push("/phone")'>
      <el-row class="container">
        <el-col :span="3">
          <i class="ic el-icon-mobile-phone"></i>
        </el-col>
        <el-col :span="17">
          <div class="listitem">
            <h3>手机号</h3>
          </div>
        </el-col>
        <el-col :span="4" class="list-right">
          <font>></font>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "me",
  filters:{
      phone(data,a){
        return data.replace(data.slice(3,7),'****')
      }
  },
  methods:{
    push(route){
      if(this.$store.state.phone){
        this.$router.push(route)
      }else{
        this.$router.push('/login')
      }

    }
  }
};
</script>

<style scoped>
.list-right{
  text-align: right;
  color: gray;
}
.ic{
  font-size: 22px;
  color: rgb(0,142,255);
}
.me{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color:rgb(245,245,245);
}
.list {
  cursor: pointer;
  background: white;
}


.user {
  border: 1px solid;
  height: 100px;
  background-color:rgb(0,142,255);
  color: white;
}
.container{
  height: 50px;
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
}
.userimg {
  border: 1px solid;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
}
.userimg img {
  width: 100%;
  height: 100%;
}
.usermsg {
  width: 60%;
  height: 70px;
  cursor: pointer;
}
.usermsg div {
  line-height: 35px;
}
</style>